import React from 'react'
import {Text, TouchableOpacity, View} from "react-native";
import Nav from "./common/nav";
import Flex from "@ant-design/react-native/es/flex/Flex";
import InputItem from "@ant-design/react-native/es/input-item/index";
import List from "@ant-design/react-native/es/list/index";
import WingBlank from "@ant-design/react-native/es/wing-blank/index";
import Button from "@ant-design/react-native/es/button/index";
import WhiteSpace from "@ant-design/react-native/es/white-space/index";
import {Actions} from 'react-native-router-flux'
import Icon from "@ant-design/react-native/es/icon/index";

export default class Login extends React.Component {
  state = {
    phone: '',
    password: '',
    isEnablePassword: false
  }

  render() {
    const {phone, password, isEnablePassword} = this.state
    return <View style={{backgroundColor: 'white', height: '100%'}}>
      <WhiteSpace size='xl'/>
      <Nav/>
      <WingBlank style={{marginTop: '30%'}}>
        <List>
          <InputItem
            clear
            type={'phone'}
            value={phone}
            onChange={phone => this.setState({phone})}
            placeholder="请输入手机号码"
          />
          <WhiteSpace size='lg'/>
          <View>
            <InputItem
              value={password}
              type={isEnablePassword ? '' : 'password'}
              onChange={password => this.setState({password})}
              placeholder="请输入登陆密码"
            />
              <TouchableOpacity
                style={{position: 'absolute', left: '80%'}}
                onPressIn={() => this.setState({isEnablePassword: !isEnablePassword})}
                onPressOut={() => this.setState({isEnablePassword: !isEnablePassword})}
              >
                <View>
                  <Icon name="eye-invisible"
                        size='lg'/>
                </View>
              </TouchableOpacity>
          </View>
          <WhiteSpace size='lg'/>
          <Flex>
            <Text
              onPress={() => Actions.messageLogin()}
              style={{marginLeft: 10}}>短信快捷登陆 | </Text>
            <Text onPress={() => Actions.register()}>注册</Text>
            <Text
              onPress={() => Actions.resetPassword()}
              style={{marginLeft: '40%'}}>忘记密码</Text>
          </Flex>
          <WhiteSpace size='lg'/>
          <Button type="primary"
                  onPress={() => Actions.reset('home')}>
            登陆</Button>
        </List>
      </WingBlank>
    </View>
  }
}